<template>
  <div class="container">
    <v-card rounded="lg" elevation="2"
     class="card my-10 mb-3 py-5" style="max-width: 600px;">
      <div class="container box container--fluid">
        <v-badge bottom overlap icon="mdi-rotate-right" color="grey"
          offset-x="20" offset-y="20">
          <v-avatar size="80" color="grey lighten-2">
            <img :src="avatars" alt="avatar">
          </v-avatar>
        </v-badge>
        <div class="row mt-5">
          <div class="d-none d-sm-flex col col-4">
            <v-subheader>Nick Name</v-subheader>
          </div>
          <v-col class="col-wrapper pointer">
            <div class="d-flex justify-space-between" v-if="!showNickName"
             @click="handleShowNickName">
              <div class="input-place font-bold">{{userInfo.userName}}</div>
              <van-icon class="input-place" name="arrow"></van-icon>
            </div>
            <v-text-field dirty v-if="showNickName" v-model="name" label="Input a nick name">
              <v-btn slot="append-outer" small elevated>Valid</v-btn>
            </v-text-field>
          </v-col>
        </div>
        <div class="row">
          <div class="d-none d-sm-flex col col-4">
            <v-subheader>Email adress</v-subheader>
          </div>
          <v-col class="pointer">
            <div v-if="!showEmail" class="d-flex justify-space-between"
              @click="handleShowEmail">
              <div class="input-place font-bold">{{userInfo.account}}</div>
              <van-icon class="input-place" name="arrow"></van-icon>
            </div>
            <div v-if="showEmail">
              <v-text-field v-model="email" label="Email adress"></v-text-field>
              <v-text-field v-model="code" label="Verify code">
                <template #append-outer>
                  <v-btn small elevated>Send Code</v-btn>
                  <v-btn class="ml-2" small elevated>Valid</v-btn>
                </template>
              </v-text-field>
            </div>
          </v-col>
        </div>
      </div>
    </v-card>
  </div>
</template>

<script>
/* eslint-disable @typescript-eslint/no-var-requires */
import Vue from 'vue';
import { Icon } from 'vant';
import { mapState } from 'vuex';

const avatars = require('@/assets/icon/ava-1.png');

Vue.use(Icon);
export default Vue.extend({
  name: 'UserMy',
  data() {
    return {
      showNickName: false,
      showEmail: false,
      name: '',
      email: '',
      code: '',
      avatars,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    handleShowNickName() {
      this.showNickName = true;
      this.showEmail = false;
    },
    handleShowEmail() {
      this.showEmail = true;
      this.showNickName = false;
    },
  },
});
</script>

<style lang='scss' scoped>
.card {
  margin: 0 auto;
  .box {
    text-align: center;
  }
  .col-wrapper {
    max-height: 72px;
    box-sizing: border-box;
  }
  .pointer {
    cursor: pointer;
  }
  .input-place {
    line-height: 48px;
    height: 48px;
  }
  .font-bold {
    font-weight: 700;
  }
}
</style>
